<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upvote!</title>
    
    <link rel="stylesheet"
        href="../public/bulma/0.9.4/css/bulma.css">
    <link rel="stylesheet"
        href="../public/fontaswsome/6.2.0/css/all.css">
    <link rel="stylesheet"
        href="../public/style.css">

</head>
<body>
    <div id="app">
        <h2 class="title has-text-centered dividing-header">UpVote!</h2>
        <div class="section">
            <article class="media" v-for="submission in submissions" v-bind:key="submission.id">
                <figure class="media-left">
                    <img class="image is-64x64"
                        v-bind:src="submission.submissionImage">
                </figure>
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong>
                                <a v-bind:href="submission.url" class="has-text-info">
                                    {{submission.title}}
                                </a>
                                <span class="tag is-small">#{{submission.id}}</span>
                            </strong>
                            <br>
                            {{submission.description}}
                            <br>
                            <small class="is-size-7">
                                Submitted by:
                                <img class="image is-24x24"
                                v-bind:src="submission.avatar">
                            </small>
                        </p>
                    </div>
                </div>
                <div class="media-right">
                    <span class="icon is-small">
                        <i class="fa fa-chevron-up"></i>
                        <strong class="has-text-info">{{submission.votes}}</strong>
                    </span>
                </div>
            </article>
        </div>
    </div>

    <script src="../public/vue/vue_2.7.14.js"></script>
    <script src="./seed.js"></script>
    <script src="./main.js"></script>
</body>
</html>